import * as React from 'react'
import { Tag } from "antd"
import { observer } from 'mobx-react';
import { IBookListProps } from '../stores'


@observer export default class extends React.Component<IBookListProps> {
  public render() {
    const tags = this.props.bookStore.tagArr.map(tag => {
      const color = this.props.bookStore.filterTag === tag.tagName ? { color: 'blue' } : {}
      return (<Tag {...color} key={tag.tagName} className="tag" onClick={() => this.props.bookStore.filter(tag.tagName)}>{tag.tagName}({tag.count})</Tag>)
    })
    const props = this.props.bookStore.filterTag === undefined ? { color: 'blue' } : {}
    return (<div>
      <Tag {...props} className="tag" onClick={() => this.props.bookStore.selectAll()}>所有图书({this.props.bookStore.books.length})</Tag>
      {tags}
    </div>)
  }
};
